<template>
  <div class="wrapper">
    <el-row>
      <el-button @click="showCreateFolderBox">新建文件夹</el-button>
    </el-row>
    <el-card class="folder" shadow="hover" v-for="item in folderList" :key="item.id" :body-style="{padding: '5px'}">
      <svg-icon icon-class="folder" class="svg_icon" @click="goDocumentList(item)"></svg-icon>
      <span class="name">{{ item.name }}</span>
      <el-dropdown class="folder_dropdown" trigger="click" @command="folderOperation">
        <span class="el-dropdown-link"> <i class="el-icon-arrow-down el-icon--right"></i> </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="'delete_' + item.id">
            <i class="el-icon-delete"> 删除</i>
          </el-dropdown-item>
          <el-dropdown-item :command="'rename_' + item.id">
            <i class="el-icon-edit"> 修改名称</i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-card>
  </div>
</template>

<script>
import * as documentApi from '../../api/document'
import {messageError, messageSuccess} from '../../utils/message'

export default {
  name: 'FolderList',
  data() {
    return {
      folderList: []
    }
  },
  created() {
    this.getFolder()
  },
  methods: {
    getFolder() {
      documentApi
        .getFolders()
        .then(response => {
          this.folderList = response.data
        })
        .catch()
    },
    showCreateFolderBox() {
      this.$prompt('请输入文件名称', '创建文件', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: null,
        inputErrorMessage: '文件名称不能为空'
      })
        .then(value => {
          this.createFolder(value.value)
        })
        .catch(() => {})
    },
    createFolder(name) {
      if (name === null) {
        messageError('文件名不能为空')
        return
      }
      let params = {name: name}
      documentApi.createFolder(params).then(() => {
        messageSuccess('创建文件成功')
        this.getFolder()
      })
    },
    folderOperation(command) {
      let operation = command.split('_')
      switch (operation[0]) {
        case 'delete':
          this.deleteFolder(operation[1])
          break
        case 'rename':
          this.renameFolder(operation[1])
          break
        default:
          break
      }
    },
    deleteFolder(id) {
      let params = {id: id}
      documentApi.deleteFolder(params).then(() => {
        this.getFolder()
        messageSuccess('删除成功')
      })
    },
    renameFolder(id) {
      this.$prompt('请输入文件名称', '文件重命名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: null,
        inputErrorMessage: '文件名称不能为空'
      })
        .then(value => {
          if (value.value === null) {
            messageError('名字不能为空')
          }
          let params = {id: id, name: value.value}
          documentApi.renameFolder(params).then(() => {
            messageSuccess('修改名称成功')
            this.getFolder()
          })
        })
        .catch(() => {})
    },
    goDocumentList(folder) {
      this.$router.push({
        name: 'DocumentList',
        query: {
          id: folder.id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  margin: 20px;

  .folder {
    cursor: pointer;
    margin: 10px;
    height: 140px;
    width: 110px;
    float: left;
    display: inline;

    .name {
      margin-top: 5px;
      text-align: center;
      max-width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      font-size: 14px;
    }

    .svg_icon {
      height: 100px;
      width: 100px;
    }
    .folder_dropdown {
      margin-top: 5px;
      float: right;
      cursor: pointer;
    }
  }
}
</style>
